<template>
    <div class="container_top">
        <div class="content">
            <h1 class="left">
                <img @click="goHome" src="../../assets/images/logo.png" alt="logo">
                <div class="left-text">小何很牛 <span>预约挂号统一平台</span></div>
            </h1>
            <div class="right">
                <p @click="help" class="help">帮助中心</p>
                <p @click="login" class="login" v-if="!userStore.userInfo?.name">登陆/注册</p>
                <el-dropdown trigger="click" v-else>
                    <span class="el-dropdown-link">
                        {{ userStore.userInfo?.name }}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu class="el-dropdown_menu">
                            <el-dropdown-item @click="goUser('/user/certification')">实名认证</el-dropdown-item>
                            <el-dropdown-item @click="goUser('/user/order')">挂号订单</el-dropdown-item>
                            <el-dropdown-item @click="goUser('/user/patient')">就诊人管理</el-dropdown-item>
                            <el-dropdown-item @click="logOut">退出登陆</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { useRouter } from 'vue-router';
import useUserStore from '@/store/modules/user'
import { ArrowDown } from '@element-plus/icons-vue';
let $router = useRouter()
// 获取user仓库的数据(visiable)可以控制login组件的对话框显示与隐藏
let userStore = useUserStore()

const goHome = () => {
    $router.push({
        path: '/home'
    })
}
const help = () => {
    $router.push({
        path: '/user/feedback'
    })
}
// 点击登陆与注册按钮的时候弹出对话框
const login = () => {
    userStore.dialogVisible = true;
}
// 退出登录按钮
const logOut = () => {
    userStore.logOut();
    $router.push('/');
}
// 点击顶部下拉菜单进行路由跳转
const goUser = (path: string) => {
    $router.push(path);
}
</script>
<style scoped lang="scss">
@font-face {
    font-family: girl;
    src: url(../../assets/fontFamily/QIANTUXIAOTUTI-2.TTF);
}

.container_top {
    // filter: grayscale(100%);
    // -webkit-filter: grayscale(100%);
    height: $hospital-top-pc;
    width: 100%;
    min-width: 350px;
    background-color: #FFFFFF;

    .content {
        max-width: 1200px;
        height: $hospital-top-pc;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            display: flex;
            align-items: center;

            img {
                width: 80px;
                margin-right: 16px;
                cursor: pointer;
            }

            .left-text {
                font-size: 24px;
                color: #55a6fe;
                font-weight: 500;
                font-family: girl;

            }
        }

        .right {
            display: flex;
            align-items: center;

            .help {
                margin-right: 16px;
            }

            p {
                color: $base-color;
                cursor: pointer;
                font-size: 14px;
            }

            .el-dropdown:hover,
            p:hover {
                color: black;
            }

            .el-dropdown {
                cursor: pointer;

                span {
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
}

@media (max-width: 1280px) {
    .container_top {
        height: $hospital-top-ipad;

        .content {
            height: $hospital-top-ipad;
            padding: 0 16px;

            .left {
                img {
                    width: 60px !important;
                    margin-right: 10px !important;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .container_top {
        height: $hospital-top-iphone;

        .content {
            height: $hospital-top-iphone;

            .left {
                img {
                    width: 50px !important;
                    margin-right: 8px !important;
                }

                .left-text {
                    font-size: 22px !important;

                    span {
                        display: none;
                    }
                }
            }

            .right {


                .help {
                    margin-right: 8px !important;
                }

                p,
                .el-dropdown-link {
                    font-size: 12px !important;
                }
            }
        }
    }

    .el-dropdown_menu {
        :deep(.el-dropdown-menu__item) {
            font-size: 12px !important;

        }
    }
}
</style>
  